<template>
	<view class="filter_box bg-fff padding-y-20 flex align-center">
		<view class="flex1 text-center fs-30 color-333" :class="{'color-zhuse':current == 0}" @tap="tabIndex(0)">综合</view>
		<view class="flex1 text-center fs-30 color-333" :class="{'color-zhuse':current == 1}" @tap="tabIndex(1)">最新</view>
		<view class="flex1 text-center flex flex-center fs-30 color-333" :class="{'color-zhuse':current == 2}" @tap="tabIndex(2)">
			价格
			<view class="flex flex-direction margin-left-10">
				<uni-icons type="arrowup" size="10" :class="{'color-zhuse': current == 2 && price == 1}" :color="'color-zhuse'"></uni-icons>
				<uni-icons type="arrowdown" size="10" :class="{'color-zhuse': current == 2 && price == 2}"></uni-icons>
			</view>
		</view>
		<view class="flex1 text-center fs-30 color-333" :class="{'color-zhuse':current == 3}" @tap="tabIndex(3)">
			筛选
			<image class="shaixuan" src="../../static/img/shaixuan.png" mode="aspectFit"></image>
		</view>
		
		<!-- 筛选 -->
		<view class="cate-mask" :class="cateMaskState==0 ? 'none' : cateMaskState==1 ? 'show' : ''" @click="toggleCateMask">
			<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
				<view class="top">
					<view class="title">价格区间(元)</view>
					<view class="ipt">
						<input type="number" placeholder="最低价" v-model="pricemin">
						<text>-</text>
						<input type="number" placeholder="最高价" v-model="pricemax">
					</view>
				</view>
				<view class="top">
					<view class="title">发货地区</view>
					<view class="padding-y-30 fa_box">
						<view class="flex flex-wrap align-center">
							<view class="fa_item on">全国</view>
							<view class="fa_item">全国</view>
							<view class="fa_item">全国</view>
							<view class="fa_item">全国</view>
							<view class="fa_item">全国</view>
							<view class="fa_item">全国</view>
							<view class="fa_item">全国</view>
							<view class="fa_item">全国</view>
							<view class="fa_item">全国</view>
							<view class="fa_item">全国</view>
							<view class="fa_item">全国</view>
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="bg1" @click="toggleCateMask">重置</view>
					<view class="bg2" @click="toggleCateMask">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {},
		data(){
			return{
				current:0,
				synthesis:'',
				newest:'',
				price:'',
				pricemin:'',
				pricemax:'',
				cateMaskState:false
			}
		},
		computed: {
			filterData() {
				const data = {
					synthesis: this.synthesis,
					newest: this.newest,
					price: this.price,
					pricemin: this.pricemin,
					pricemax: this.pricemax
				};
				return data;
			}
		},
		methods: {
			tabIndex(index){
				this.current = index;
				if(index == 0){
					this.synthesis = 1
					this.newest = ''
					this.price = ''
					this.cateMaskState = false
				}else if(index == 1){
					this.synthesis = ''
					this.newest = 1
					this.price = ''
					this.cateMaskState = false
				}else if(index == 2){
					this.synthesis = ''
					this.newest = ''
					this.price = this.price == 1 ? 2 : 1;
					this.cateMaskState = false
				}else if(index == 3){
					this.synthesis = ''
					this.newest = ''
					this.price = ''
					this.cateMaskState = true
				}
			},
			//显示筛选面板
			toggleCateMask(type){
				console.log(type)
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(()=>{
					this.cateMaskState = state;
					if(this.cateMaskState == 0){
						this.$emit('change', this.filterData);
					}
				}, 500)
			},
			stopPrevent(){},
		}
	};
</script>

<style lang="scss" scoped>
	.shaixuan{
		width: 22rpx;
		height: 26rpx;
		margin-left: 10rpx;
	}
	.cate-mask{
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 999;
		transition: .3s;
		.cate-content{
			width: 630upx;
			height: 100%;
			background: #fff;
			float:right;
			transform: translateX(100%);
			transition: .3s;
			padding: 0 40upx;
			position: relative;
			.top{
				.title{
					margin-top: 60upx;
					font-size: 34upx;
					color: #333;
				}
				.ipt{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 34upx;
					color: #000;
					margin-top: 44upx;
					input{
						width: 220upx;
						height: 70upx;
						line-height: 70upx;
						text-align: center;
						border-radius: 4upx;
						background: #EEEEEE;
						font-size: 28upx;
						color: #333;
					}
				}
			}
			.btn{
				position: absolute;
				height: 130upx;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 0 40upx;
				view{
					width: 236upx;
					height: 70upx;
					border-radius: 40upx;
					text-align: center;
					line-height: 70upx;
				}
				.bg1{
					background: #f3f3f3;color: #333;
				}
				.bg2{
					background: linear-gradient(to right, $uni-color-zhuse, $uni-color-fuse);
					color: #fff;
				}
			}
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.cate-content{
				transform: translateX(0);
			}
		}
	}
	.fa_item{
		width: 160rpx;
		height: 60rpx;
		background: #EEEEEE;
		font-size: 26rpx;
		color: #333;
		text-align: center;
		line-height: 60rpx;
		margin:10rpx;
	}
	.fa_item.on{
		background: #FFE4E4 url(../../static/img/fa_on.png) no-repeat right top;
		background-size: 42rpx 26rpx;
		color:$uni-color-zhuse;
	}
	.fa_box{
		max-height: 820rpx;
		overflow-y: auto;
	}
</style>
